import React, { Component } from 'react';

/*
  vue mixin 混入
  1. 将一些可以重复使用的数据或者函数或者钩子函数等封装在一个 混入中
  2. 在使用的时候可以直接用 mixins: [] 来进行添加

  react 高阶组件
  1. 可以将一些重复使用的数据，函数等放在一个高阶组件中
  2. 高阶组件是一个纯函数，将一个组件当做参数，返回一个新的组件
*/
const withFooter = (Com)=>{

  // 组件复用
  class Footer extends Component {
    state = {
      msg: '你笑起来真好看'
    }
    render(){
      return (<>
          <Com msg={this.state.msg} />
          <footer style={{backgroundColor:'#f66', height: 50}}>页脚</footer>
      </>)
    }
  }

  return Footer
}




const Page1 = withFooter((props)=>{
  return (<>
    <h1>page1 页面 --- {props.msg}</h1>
  </>)
})

const Page2 = withFooter((props)=>{
  return (<>
    <h1>page2 页面 ---- {props.msg}</h1>
  </>)
})


// @withFooter() 装饰器的写法，现在 react 故意不支持装饰器
// 装饰器是用来装饰下面的组件，可以实现数据内容的共享
// const Page1 = (props)=>{
//   return (<>
//     <h1>page1 页面 --- {props.msg}</h1>
//   </>
// })

class App extends Component {
  render() {
    return (
      <div>

        <Page1 />

        <hr />
        <hr />

        <Page2 />

      </div>
    );
  }
}

export default App;
